<template>
  <div class="home">
    <el-tabs type="border-card">
    <el-tab-pane label="数据存储">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="录像类型" prop="videoType">
          <el-checkbox-group v-model="ruleForm.videoType" prop="videoType">
            <el-checkbox label="1" name="videoType" >平台录像</el-checkbox>
            <el-checkbox label="2" name="videoType" >设备录像</el-checkbox>
            <el-checkbox label="3" name="videoType" >本地录像</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="抓拍类型" prop="snapType">
          <el-checkbox-group v-model="ruleForm.snapType">
            <el-checkbox label="1" name="snapType" >平台抓拍</el-checkbox>
            <el-checkbox label="2" name="snapType" >设备抓拍</el-checkbox>
            <el-checkbox label="3" name="snapType" >本地抓拍</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="本地录像时间" prop="localVideoTime">
          <el-input-number size="mini" v-model="ruleForm.localVideoTime" :max="60" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="远程录像时间" prop="remoteVideoTime">
          <el-input-number size="mini" v-model="ruleForm.remoteVideoTime" :max="60" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="录像保存路径" prop="videoAddress" class="file-save">
          <el-input type="text" placeholder="请输入保存文件夹" v-model="ruleForm.videoAddress" ></el-input>
        </el-form-item>
        <el-form-item label="截图保存路径" prop="screenshotsAddress" class="file-save">
          <el-input type="text" placeholder="请输入保存文件夹" v-model="ruleForm.screenshotsAddress" ></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary"  @click="updateData">应用</el-button>
    </el-tab-pane>
    <el-tab-pane label="电子地图设置">
      <el-form :model="map" :rules="mapRules" ref="mapRules" label-width="100px" class="demo-ruleForm">
         <el-form-item label="初始位置" prop="name" class="file-save">
          <el-input type="text" placeholder="请输入初始位置" v-model="map.name"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="changeMapMethod">应用</el-button>
    </el-tab-pane>
    <el-tab-pane label="久坐提醒设置" class="Sedentary">
      <el-form :model="longSit" :rules="longSitRules" ref="longSitRules" label-width="100px" class="demo-ruleForm">
         <el-form-item label="状态" prop="status" class="file-save">
           <el-radio v-model="longSit.status" label="1">开启</el-radio>
           <el-radio v-model="longSit.status" label="0">关闭</el-radio>
        </el-form-item>
        <el-form-item label="久坐时间（分钟）" prop="time" >
          <el-input-number size="mini" v-model="longSit.time" :max="60" :min="0"></el-input-number>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="changeSitMehtod">应用</el-button>
    </el-tab-pane>
    <el-tab-pane label="文件归档设置" class="file-setting">
      <el-form v-model="file" :rules="fileRules" ref="fileRules" label-width="100px" class="demo-ruleForm">
         <el-form-item label="一级文件" prop="level" >
            <el-select v-model="file[0].archiveTime" placeholder="请选择" :popper-append-to-body="false">
              <el-option label="30" value="30"></el-option>
              <el-option label="60" value="60"></el-option>
              <el-option label="90" value="90"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级文件" prop="level2" >
            <el-select v-model="file[1].archiveTime" placeholder="请选择" :popper-append-to-body="false">
              <el-option label="30" value="30"></el-option>
              <el-option label="60" value="60"></el-option>
              <el-option label="90" value="90"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="三级文件" prop="level3">
            <el-select v-model="file[2].archiveTime" placeholder="请选择" :popper-append-to-body="false">
              <el-option label="30" value="30"></el-option>
              <el-option label="60" value="60"></el-option>
              <el-option label="90" value="90"></el-option>
            </el-select>
          </el-form-item>
      </el-form>
      <el-button type="primary" @click="changeFileMethod">应用</el-button>
    </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { updateDataStore, getData, getMap, changeMap, getSit, changeSit, getFile, changeFile } from '../api/SystemManage/index'

export default {
  data () {
    return {
      ruleForm: {
        snapType: [],
        videoType: [],
        localVideoTime: 1,
        remoteVideoTime: 1,
        videoAddress: 'C:\\Users\\Default\\Downloads',
        screenshotsAddress: 'C:\\Users\\Default\\Downloads'
      },
      longSit: {
        status: '1',
        time: 10
      },
      map: {
        name: ''
      },
      file: [
        {
          archiveLevel: 1,
          archiveTime: 60
        },
        {
          archiveLevel: 2,
          archiveTime: 60
        },
        {
          archiveLevel: 3,
          archiveTime: 90
        }
      ],
      rules: {
        videoType: [
          { type: 'array', required: true, message: '请至少选择一个录像类型', trigger: 'change' }
        ],
        snapType: [
          { type: 'array', required: true, message: '请至少选择一个抓拍类型', trigger: 'change' }
        ],
        localVideoTime: [
          { required: true, message: '请选择本地录像时间', trigger: 'blur' }
        ],
        remoteVideoTime: [
          { required: true, message: '请选择远程录像时间', trigger: 'blur' }
        ],
        videoAddress: [
          { required: true, message: '请选择录像保存文件夹', trigger: 'blur' }
        ],
        screenshotsAddress: [
          { required: true, message: '请选择录像保存文件夹', trigger: 'blur' }
        ]
      },
      mapRules: {
        name: [
          { required: true, message: '请输入初始位置', trigger: 'blur' }
        ]
      },
      longSitRules: {
        status: [
          { type: 'array', required: true, message: '请选择一个状态', trigger: 'change' }
        ],
        time: [
          { required: true, message: '请选择久坐时间', trigger: 'blur' }
        ]
      },
      fileRules: {
        level: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        level2: [
          { required: true, message: '请选择', trigger: 'blur' }
        ],
        level3: [
          { required: true, message: '请选择', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    this.getDataMethod()
    this.getMapMethod()
    this.getSitMehtod()
    this.getFileMethod()
  },
  methods: {
    // 修改数据存储
    updateData () {
      updateDataStore({
        localVideoTime: this.ruleForm.localVideoTime,
        remoteVideoTime: this.ruleForm.remoteVideoTime,
        snapType: this.ruleForm.snapType.toString(),
        videoType: this.ruleForm.videoType.toString(),
        videoAddress: this.ruleForm.videoAddress,
        screenshotsAddress: this.ruleForm.screenshotsAddress
      }
      )
        .then((res) => {
          console.log('更新数据存储方式')
          if (res.data.message === '成功') {
            this.$message({
              type: 'success',
              message: res.data.message
            })
          } else {
            this.$message({
              type: 'error',
              message: res.data.message
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    // 获取数据存储
    getDataMethod () {
      getData().then((res) => {
        console.log(res)
        console.log('获取数据存储列表')
        this.ruleForm = res.data.data
        console.log('字符串转数组')
        this.ruleForm.videoType = res.data.data.videoType.split(',')
        this.ruleForm.snapType = res.data.data.snapType.split(',')
        console.log(this.ruleForm.videoType)
      }).catch((error) => {
        console.log(error)
      })
    },
    // 获取地图初始位置
    getMapMethod () {
      getMap().then((res) => {
        console.log(res)
        this.map = res.data.data
        console.log('获取地图初始点')
      }).catch((error) => {
        console.log(error)
      })
    },
    // 修改地图初始位置
    changeMapMethod () {
      changeMap({ name: this.map.name }).then((res) => {
        console.log(res)
        console.log('修改地图初始点')
        if (res.data.message === '成功') {
          this.$message({
            type: 'success',
            message: '成功修改地图初始点！'
          })
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    // 获取久坐时间
    getSitMehtod () {
      getSit().then((res) => {
        console.log(res)
        this.longSit = res.data.data
        this.longSit.status = res.data.data.status.toString()
        console.log('获取久坐初始值')
      }).catch((error) => {
        console.log(error)
      })
    },
    // 修改久坐时间
    changeSitMehtod () {
      changeSit({
        status: parseInt(this.longSit.status),
        time: this.longSit.time
      }).then((res) => {
        console.log(res)
        console.log('修改久坐时间')
        if (res.data.message === '成功') {
          this.$message({
            type: 'success',
            message: '成功修改久坐时间！'
          })
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    // 获取归档设置
    getFileMethod () {
      getFile().then((res) => {
        console.log(res)
        this.file = res.data.data
        console.log(this.file)
        console.log('归档设置')
      }).catch((error) => {
        console.log(error)
      })
    },
    // 修改归档设置
    changeFileMethod () {
      changeFile(this.file).then((res) => {
        console.log(res)
        if (res.data.message === '成功') {
          this.$message({
            type: 'success',
            message: '成功修改文件设置！'
          })
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    }
  }
}
</script>

<style scoped>
/* 选中时的俩小图标 */
.home::v-deep .el-tabs__item.is-active::before {
  content: url(../assets/img/标题-箭头右.png);
  position: relative;
  top: 5px;
  right: 4px;
}
.home::v-deep .el-tabs__item.is-active::after {
  content: url(../assets/img/标题-箭头左.png);
  position: relative;
  top: 5px;
  left: 4px;
}
/* 修改tab-item样式 */
.home >>> .el-tabs__item {
  width: 136px;
  height: 47px;
  line-height: 47px;
  text-align: center;
  font-size: 6px;
}
/* 修改nav背景色 */
.home >>>.el-tabs__nav-scroll {
  background-color: #071831;
}
 /* 去除顶部线 */
.home >>>.el-tabs--card>.el-tabs__header .el-tabs__nav {
  border: none;
}
/* 内容区 */
.home >>> .el-tabs__content {
  padding: 10px;
}
.home >>> .el-tabs--border-card {
  border: 0;
}
/* 选中时样式设置 */
.home >>> .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
  color: white;
  background-color: #071831;
  border: 0;
}
.home >>> .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
  background-color: transparent !important;
}
.home >>> .el-tabs--border-card>.el-tabs__header .el-tabs__item {
  color: #238cd6;
}
.home >>> .el-form-item {
  margin-bottom: 5px;
}
.home >>> .el-tabs__content {
    overflow: hidden;
    position: relative;
    background-color: #071831;
}
.home >>> .el-form-item__label {
  font-size: 4px;
  color: #238cd6;
  line-height: 30px;
  font-weight: bold;
}
.home >>> .el-checkbox {
  color: white;
}
.home >>> .el-checkbox__label {
  font-size: 4px;
}
.home >>> .el-form-item__content {
  line-height: 30px;
  margin-bottom: 5px;
}
.home >>> .el-input-number__decrease, .el-input-number__increase {
  top: 1px;
  width: 40px;
  height: auto;
  background: #238cd6;
  color: white;
  font-size: 13px;
  width: 30px;
}
.home >>> .el-input-number__increase {
  border-left: 1px solid #238cd6;
  background: #238cd6;
  color: white;
}
.home >>> .el-input__inner {
  border: 1px solid #238cd6;
  color: white;
  background-color: #071831;
}
.home >>> .el-input-number__decrease {
  border-right: 1px solid #238cd6;
}
.home >>> .el-checkbox__inner {
  border: 1px solid #238cd6;
  background-color: #071831;
}
/* 文件归档设置 */
.file-save >>> .el-input__inner {
  line-height: 28px;
  height: 28px;
}
.file-save >>> .el-form-item__content {
  font-size: 6px;
}
.file-save >>> .el-input {
  width: 200px;
  font-size: 2px;
}
.file-save >>> .el-input__inner::-webkit-input-placeholder {
  font-size: 10px;
}
.el-button {
  width: 60px;
  height: 25px;
  padding: 0;
  font-size: 4px;
  margin-left: 30px;
}
.el-button--primary {
  background-color: #238cd6;
  border-color: #238cd6;
}
/* 单选框样式 */
.home >>> .el-radio__label {
  font-size: 4px;
}
.el-radio {
  color: #fff;
}
.Sedentary >>> .el-form-item__label {
  width: 140px!important;
  margin-left: 0;
}
.home >>> .el-input__inner {
  line-height: 25px;
  height: 25px;
}
.home >>> .el-input__icon {
  line-height: 20px;
}
.home >>> .el-input__inner::-webkit-input-placeholder {
  font-size: 6px;
}
/* 文件归档设置 */
.file-setting {
  height: 300px;
  background-color: #071831;
}
/* 输入框样式 */
.el-input__inner {
  border-radius: 0;
  border: 1px solid #238cd6;
  background-color: #061d3c;
  height: 25px;
  width: 130px;
  margin-right: 5px;
  font-size: 4px;
  color: #fff;
}
</style>
